<template>
	<div class="view-signIn">
		<div class="signIn-main flex flex-direction-v">
			<h3 class="title">登录</h3>
			<input class="hide">
			<mt-field label="手机号" placeholder="请输入手机号" v-model="phone"></mt-field>
			<input class="hide">
			<mt-field label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>
			<div class="flex flex-center-vh">
				<mt-button ref="submitSignIn" class="submit-signIn" type="default" plain>确定</mt-button>
			</div>
			<router-link to="signUp" class="link-signUp-main">
				<mt-button class="link-signUp" size="small" plain>没有账号，马上注册</mt-button>
			</router-link>
		</div>
	</div>
</template>

<script>
	import { mapState, mapGetters, mapMutations, mapActions } from 'vuex';
	import _userService from '@/service/userService';
	import util from '@/util/Util';
	import _sessionUser from '@/util/SessionUser';

	export default {
		name: 'SignIn',
		data() {
			return {
				phone: '',
				password: '',
			}
		},
		mounted() {
			let vm = this;
			vm.$refs.submitSignIn.$el.onclick = util.throttle(2000, vm.postUserSignIn);
		},
		computed: {
			...mapState({
				token: state => state.user.token,
				userInfo: state => state.user.userInfo,
				isSignIn: state => state.user.isSignIn,
			}),
		},
		methods: {
			...mapMutations([
				'SAVE_USER_INFO',
				'SAVE_USER_SIGNIN',
				'SET_USER_TOKEN',
			]),
			// 用户登录
			postUserSignIn() {
				let vm = this
				let resultData
				let data
				let token

				vm.$indicator.open({
					text: '登录中...',
					spinnerType: 'fading-circle'
				});

				let res = _userService.signIn({
					'phone': vm.phone,
					'password': vm.password,
					'success': function(response) {
						setTimeout(function() {
							resultData = response.data;
							if(resultData.success) {
								data = response.data.data;
								token = response.data.bean.token;
								if(data) {
									vm.SAVE_USER_INFO({
										userInfo: data
									});
									vm.$socket.emit('login', {
										userId: vm.userInfo.id
									});
									vm.SET_USER_TOKEN({
										token: token
									});
									_sessionUser.ajax_common_header(vm);
									sessionStorage.setItem('token', JSON.stringify(vm.token));
									sessionStorage.setItem('userInfo', JSON.stringify(vm.userInfo));
								}
								vm.$toast({
									message: '用户登录成功',
									duration: 1000
								});
								vm.$router.push('/');
							}
							vm.$toast({
								message: resultData.message,
								duration: 1000
							});
							vm.$indicator.close();
							console.log('用户登录接口：' + resultData.message);
						}, 500)
					}
				})
				return res
			},
		}
	}
</script>

<style lang="scss" scoped>
	.view-signIn {
		.signIn-main {
			padding: 20px;
			.title {
				margin-bottom: 20px;
				text-align: center;
			}
			.submit-signIn {
				display: block;
				width: 96%;
				margin-top: 20px;
			}
			.link-signUp-main {
				width: 98%;
				text-align: right;
				.link-signUp {
					margin-top: 20px;
					border: none;
				}
			}
		}
	}
</style>